<template>
    <el-checkbox-group v-model="val" @change="item?.callbacks?.handleChange" :disabled="item?.disabled ?? false">
        <el-checkbox v-for="(i, idx) in item.options" :key="idx" :class="item?.extra?.class"
            :label="i[(item.defaultAttrs as DefaultAttrsDto)?.value || 'value']"
            :value="i[(item.defaultAttrs as DefaultAttrsDto)?.value || 'value']">
            {{ i[(item.defaultAttrs as DefaultAttrsDto)?.label || 'label'] }}
        </el-checkbox>
    </el-checkbox-group>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { PropType } from 'vue'
import type { FormItemDto, DefaultAttrsDto } from '@/components/form-component/type'

const props = defineProps({
    value: {
        type: Array as PropType<Array<string | number>>,
    },
    size: {
        type: String as PropType<'large' | 'default' | 'small'>,
        default: 'default'
    },
    item: {
        type: Object as PropType<FormItemDto>,
        required: true
    }
})

const emits = defineEmits(['update:value', 'change'])

const val = ref([] as Array<string | number>)

watch(() => props.value, (newval) => {
    if (!newval) {
        val.value = []
    } else {
        val.value = Array.isArray(newval) ? newval : (newval as string).split(',')
    }
}, {
    immediate: true
})

watch(val, (newval) => {
    emits('update:value', newval)
}, {
    deep: true
})

</script>
<style lang="scss" scoped>
:deep(.round .el-checkbox__inner) {
    border-radius: 50%;
}
</style>
